<template>
	<view class="mainpadding">
		
		<view class="flexbetween flex_wrap">
			<view class="shibox margin_top" v-for=" (item,index) in list.data" :key="item.id"
				@click="jumpDetail(item.id,item.user.id,item.data_type);item.view_num =Number(item.view_num)+1">
				<view class="dingwei">
					<view class="jinbbox flexcenter" v-if="Number(item.price)">
						<image class="jinvi" src="../static/image/sysem/jb.png" mode=""></image>
						<view class="strongtext fonweight" style="color:#FEC84F ;">{{item.price}}</view>
					</view>
					<image class="shilitu" :src="item.image_text" mode=""></image>
					<view class="flexbetween"
						style="position: absolute;bottom: 20rpx; left: 20rpx; width: 88%;">
						<view class="bofangbox flexcenter">
							<view class="margin_right1">
								<u-icon name="play-right" color="#fff" size="14"></u-icon>
							</view>
							<view class="smalltext xiaobai">{{item.view_num}}</view>
						</view>
						<view class="smalltext xiaobai ">{{formatSeconds(Number(item.sc))}}</view>
					</view>
				</view>
				<view class="spbrbox" @click.stop="currentindex=index;show = true">
					<view class="ershil xiaobai yhxk">{{item.des}}</view>
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<image class="touxiang margin_right1" :src="item.user.avatar_text" mode=""></image>
							<view class="strongtext xiaohui ">{{item.user.nickname}}</view>
						</view>
						<image class="sangd" src="../static/image/sysem/sgd.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show=false" :round="20" v-if="list.data.length">
			<view class="mainpadding" style="background-color: #282536;">
				<view class="textcenter titletext xiaobai">发布者</view>
				<view class="margin_top flexbetween" @click="jumper('/pages_homepage/gerenzhuye?id=',list.data[currentindex].user.id)">
					<view class="flexleft">
						<image class="grtoux margin_right3" :src="list.data[currentindex].user.avatar_text" mode="">
						</image>
						<view class="textcenter sanshier xiaobai">{{list.data[currentindex].user.nickname}}</view>
					</view>
					<view class="honbtn flexcenter"
						v-if="list.data[currentindex].is_gz==0 && list.data[currentindex].user.id!=myuserId" @click.stop="gz_fn()">关注</view>
				</view>
				<view class="flexbetween margin_top5">
					<view class="grbox flexleft" style="padding: 26rpx 40rpx;" @click="dz_fn();show=false;">
						<view class="dianzan margin_right1"></view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_dz==0">点赞视频</view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_dz==1">取消点赞</view>
					</view>
					<view class="grbox flexleft" style="padding: 24rpx 40rpx;" @click="sc_fn();show=false;">
						<view class="shoucang margin_right1"></view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_collect==0">收藏视频</view>
						<view class="xiaobai ershil" v-if="list.data[currentindex].is_collect==1">取消收藏</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: "",
				text: "",
				currentindex: 0,
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				myuserId:"",
				keywords:""
			}
		},
		onLoad(options) {
			this.type = options.id
			let text = ""
			if (this.type == 1) {
				text = "推荐关注"
			} else if (this.type == 2) {
				text = "下载热榜"
			} else if (this.type == 3) {
				text = "官方严选"
			} else if (this.type == 4) {
				text = "搜索结果"
				this.keywords = options.keywords
			}
			uni.setNavigationBarTitle({
				title: text
			});
			this.init()
		},
		onShow() {
			this.myuserId = uni.getStorageSync("user_id")
		},
		methods: {
			dz_fn() { //点赞/取消点赞
				httpRequest.request('/api/videocl/clVideoDz', 'GET', {
					id: this.list.data[this.currentindex].id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.list.data[this.currentindex].is_dz = this.list.data[this.currentindex].is_dz == 0 ?
							1 : 0
					}
				})
			},
			sc_fn() { //收藏/取消收藏
				httpRequest.request('/api/videocl/clVideoCollect', 'GET', {
					id: this.list.data[this.currentindex].id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.list.data[this.currentindex].is_collect = this.list.data[this.currentindex]
							.is_collect == 0 ? 1 : 0
					}
				})
			},
			gz_fn(){ //关注/取消关注
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id: this.list.data[this.currentindex].user.id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
						const obj = this.list.data[this.currentindex]
						uni.$emit("guanzhuemitfn", {is_gz:obj.is_gz==0?1:0,frienduser_id:obj.user.id})
					}
				})
			},
			jumpDetail(id, listuser_id,type) {
				if(type==1){
					uni.navigateTo({
						url: "/pages_homepage/shipinxq?id=" + id + "&listuser_id=" + listuser_id
					})
				}else{
					uni.navigateTo({
						url:"/pages_homepage/shipin/shipin?id="+id
					})
				}
				this.addviewnum(id)
			},
			addviewnum(id){
				httpRequest.request('/api/videocl/addViewNum', 'GET', {
					id
				}).then(res => {})
			},
			init(isPage, page) {
				let _this = this
				let data = {
					page: page || 1,
					limit: 12,
				}
				if(this.type==1)this.$set(data,'is_rec',1)
				if(this.type==2)this.$set(data,'is_yx',1)
				if(this.type==3)this.$set(data,'download_sort',1)
				if(this.type==4)this.$set(data,'keywords',this.keywords)
				httpRequest.request('/api/videocl/videoIndex', 'GET', data).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);            
			},
			jumper(url,val) {
				uni.navigateTo({
					url: url+val
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 视频
	.jinvi {
		width: 22rpx;
		margin-right: 7rpx;
		height: 22rpx;

	}

	.jinbbox {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		background: #FF4B53;
		border-radius: 13rpx 0rpx 13rpx 0rpx;
		padding: 5rpx 16rpx 5rpx 10rpx;
	}

	.sangd {
		width: 4rpx;
		height: 24rpx;
	}

	.touxiang {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
	}

	.spbrbox {
		padding: 30rpx 20rpx;
	}

	.bofangbox {
		padding: 7rpx 10rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		background-color: rgba(255, 255, 255, .3);
	}

	.shilitu {
		width: 332rpx;
		height: 176rpx;
		border-radius: 13rpx 13rpx 0rpx 0rpx;
	}

	.shibox {
		width: 48%;
		background: #282536;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
	}
</style>